<template>
<article class="page page-caesar-decrypt container">
	<h4 class="text-center">移位密码(凯撒)</h4>
	<form class="content">
		<fieldset>
			<legend>参数设置</legend>
			<div class="form-group row">
				<label class="col-1 col-form-label col-form-label-sm">密 文</label>
				<div class="col-11">
					<input type="text" class="form-control form-control-sm" v-model.trim="cipherText" placeholder="请输入密文">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-1 col-form-label col-form-label-sm">起 点</label>
				<div class="col-5">
					<input type="text" class="form-control form-control-sm" v-model="start" placeholder="起始字符的ASCII编码" :readonly="isAllLetters">
				</div>
				<label class="col-1 col-form-label col-form-label-sm">ASCII查询</label>
				<div class="col-5">
					<div class="input-group">
						<input type="text" class="form-control form-control-sm" v-model="ascii" placeholder="请输入要查询的字符">
						<div class="input-group-append" @click="asciiQuery">
							<span class="input-group-text">Go!</span>
						</div>
					</div>
				</div>
			</div>
			<div class="form-group row">
				<label for="hex" class="col-1 col-form-label col-form-label-sm">H e x</label>
				<div class="col-11">
					<input type="number" min="0" class="form-control form-control-sm" v-model="hex" placeholder="参与计算的位数" :readonly="isAllLetters">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-1 col-form-label col-form-label-sm"></label>
				<div class="col-11">
					<div class="form-check">
						<input type="checkbox" class="form-check-input" v-model="isAllLetters" @change="tabAllLetters">
						<label class="form-check-label">
							使用26个英文字母算法<span class="text-danger">（注：勾选此项后，起点和Hex将不可自定义）</span>
						</label>
					</div>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-1 col-form-label col-form-label-sm">长 度</label>
				<div class="col-11">
					<input type="text" class="form-control form-control-sm" v-model="cipherTextLen" placeholder="密文长度" readonly="readonly">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-1 col-form-label col-form-label-sm"></label>
				<div class="col-11">
					<x-button type="primary" block @click="calcHandler">计 算</x-button>
				</div>
			</div>
		</fieldset>
		<fieldset>
			<legend>计算结果</legend>
			<table class="table table-bordered">
				<tbody>
					<tr><th>位移</th><th>移位后</th><th>小写</th></tr>
					<tr v-for="(row, rIndex) in deciphered" :key="`row_${rIndex}`">
						<td><pre>{{row.num}}</pre></td>
						<td><pre>{{row.val}}</pre></td>
						<td><pre>{{row.val.toLowerCase()}}</pre></td>
					</tr>
				</tbody>
			</table>
		</fieldset>
	</form>
</article>
</template>

<script>
export default {
	name: 'caesar-decrypt',
	data () {
		return {
			cipherText: '',
			deciphered: [],
			start: '',
			ascii: '',
			hex: 26,
			isAllLetters: true,
		}
	},
	computed:{
		cipherTextLen () {
			return this.cipherText.length
		}
	},
	methods: {
		asciiQuery () {
			this.ascii = this.ascii.charCodeAt()
		},
		tabAllLetters () {
			if (this.isAllLetters) {
				this.hex = 26
				this.start = ''
			}
		},
		calcHandler () {
			this.deciphered = []
			let start = parseInt(this.start)
			let hex = parseInt(this.hex)
			let deciphered = []
			if (!hex) {
				this.$toast('Hex设置不合法！')
				return
			}
			for (let i = 0; i < hex; i++) {
				let val = ''
				if (this.isAllLetters) {
					for (let j = 0; j < this.cipherTextLen; j++) {
						let oldChar = this.cipherText[j].charCodeAt()
						let newChar = oldChar + i
						if (oldChar >= 65 && oldChar <= 90) {
							val += String.fromCharCode((newChar - 65) % 26 + 65)
						} else if (oldChar >= 97 && oldChar <= 122) {
							val += String.fromCharCode((newChar - 97) % 26 + 97)
						} else {
							val += this.cipherText[j]
						}
					}
				} else {
					for (let j = 0; j < this.cipherTextLen; j++) {
						let oldChar = this.cipherText[j].charCodeAt()
						let newChar = oldChar + i
						if (oldChar >= start && oldChar < (start + hex)) {
							val += String.fromCharCode((newChar - start) % hex + start)
						} else {
							this.deciphered = []
							this.$toast('算法配置错误，请重新配置！')
							return
						}
					}
				}
				deciphered.push({num: i, val: val})
				this.deciphered = deciphered
			}
		},
	}
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-caesar-decrypt {
	display: flex;
	flex-direction: column;
	.content {
		height: 0;
		flex-grow: 1;
		overflow: hidden auto;
		.col-form-label {
			text-align: right;
		}
		fieldset {
			& + fieldset {
				margin-top: 1em;
			}
			.table {
				text-align: center;
				pre {
					padding: 0;
					margin-bottom: 0;
					border: none;
					background-color: none;
				}
			}
		}
	}
}
</style>
